<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <scroll-view direction="vertical">
      <swiper>
        <swiper-item>
          <image class="pic" src="/static/logo.png"></image>
        </swiper-item>
        <swiper-item>2</swiper-item>
        <swiper-item>3</swiper-item>
        <swiper-item>4</swiper-item>

      </swiper>
      <u-loading-icon v-show="true"></u-loading-icon>
      <uni-calendar></uni-calendar>

      <uni-badge></uni-badge>


      <uni-badge></uni-badge>

<!--      <u-button>我是u-butoon</u-button>-->


    </scroll-view>
  </view>
</template>

<script setup>
import {ref} from "vue";


const title = ref("hele");
</script>

<style lang="scss">

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

swiper {
  width: 100%;
  height: 200rpx;

  swiper-item {
    height: 100%;
    width: 100%;
    background-color: pink;
  }

  swiper-item:nth-child(2n) {
    background-color: aqua;
  }

}

.pic {
  width: 100%;
  height: 100%;
}

uni-calendar {
  height: 300rpx;
  width: 300rpx;
}
</style>
